<template>
  <div class="bg-light idcard-pictures">
    <div class="container-title">证件照片</div>
    <div class="picList">
      <div class="ml">
        <div class="imgwrap">
          <div>
            <h3>身份证正面</h3>
            <PictureEditItem
              v-if="isEdit"
              :uploadList="idp"
              :maxlength="1"
              :large="true"
              @uploadPic="uploadPic($event, 'ownerIdcardPositiveImageUrl')"
            />
            <div v-else class="orgPic mt">
              <imgLink :imgurl='imgs.ownerIdcardPositiveImageUrl' />
            </div>
          </div>
          <div class="orgPic" v-if="imgs.ownerIdcardPositiveImageUrlOrg">
            <h3>更改前</h3>
            <imgLink :imgurl='imgs.ownerIdcardPositiveImageUrlOrg' />
          </div>
        </div>
      </div>
      <div class="ml">
        <div class="imgwrap">
          <div>
            <h3>身份证反面</h3>
            <PictureEditItem
              v-if="isEdit"
              :uploadList="idn"
              :maxlength="1"
              :large="true"
              @uploadPic="uploadPic($event, 'ownerIdcardNegativeImageUrl')"
            />
            <div v-else class="orgPic mt">
              <imgLink :imgurl='imgs.ownerIdcardNegativeImageUrl' />
              <!-- <img :src="rendImgUrl(imgs.ownerIdcardNegativeImageUrl)" alt=""> -->
            </div>
          </div>
          <div class="orgPic" v-if="imgs.ownerIdcardNegativeImageUrlOrg">
            <h3>更改前</h3>
            <imgLink :imgurl='imgs.ownerIdcardNegativeImageUrlOrg' />
          </div>
        </div>
      </div>
      <div class="ml">
        <div class="imgwrap">
          <div>
            <h3>营业执照</h3>
            <PictureEditItem
              v-if="isEdit"
              :uploadList="bsl"
              :maxlength="1"
              :large="true"
              @uploadPic="uploadPic($event, 'businessLicenseImageUrl')"
            />
            <div v-else class="orgPic mt">
              <imgLink :imgurl='imgs.businessLicenseImageUrl' />
            </div>
          </div>
          <div>
            <div class="orgPic" v-if="imgs.businessLicenseImageUrlOrg">
              <h3>更改前</h3>
              <imgLink :imgurl='imgs.businessLicenseImageUrlOrg' />
            </div>
          </div>
        </div>
      </div>
    </div>
    <Form :label-width="120" :rules="rule" ref="form" :model="form.storeContractDTO" class="mr">
      <div class="fleft mt">
        <FormItem style="flex:1" label="联系人姓名" prop='ownerName'>
          <template v-if="isFromPublic">
            <Input placeholder="联系人姓名" v-model="form.storeContractDTO.ownerName"/>
          </template>
          <template v-else>
            <Input :readonly='!isEdit' placeholder="联系人姓名" v-model="form.storeContractDTO.ownerName"/>
          </template>
        </FormItem>
        <FormItem style="flex:1" label="身份证号" prop='ownerIdcardNo'>
          <template v-if="isFromPublic">
            <Input placeholder="身份证号" v-model="form.storeContractDTO.ownerIdcardNo" />
          </template>
          <template v-else>
            <Input :readonly='!isEdit' placeholder="身份证号" v-model="form.storeContractDTO.ownerIdcardNo" />
          </template>
        </FormItem>
      </div>
      <div class="fleft">
        <FormItem style="flex:1" label="身份证有效期" prop='ownerIdcardBeginDate'>
          <DatePicker
            :disabled='!isEdit'
            type="datetimerange"
            placement="bottom-start"
            format="yyyy-MM-dd"
            v-model="timeRange"
            :options="options"
            placeholder="请选择身份证有效期"
          ></DatePicker>
        </FormItem>
        <FormItem style="flex:1" label="营业执照注册号" prop='businessLicenseNo'>
          <template v-if="isFromPublic">
            <Input placeholder="营业执照注册号" v-model="form.storeContractDTO.businessLicenseNo" @on-blur="onCheckNo"/>
          </template>
          <template v-else>
            <Input :readonly='!isEdit' placeholder="营业执照注册号" v-model="form.storeContractDTO.businessLicenseNo" @on-blur="onCheckNo"/>
          </template>
          <p v-if="isExit || isBlurExit" class="font-red">营业执照已存在</p>
        </FormItem>
      </div>
      <FormItem label="最近上传时间">
        <p v-if="form.idPhoneLogList&&form.idPhoneLogList[0]">{{form.idPhoneLogList[0].date}}</p>
      </FormItem>
      <FormItem label="历史上传记录">
        <Table
          :height="tableHeight"
          stripe
          :columns="list.columns"
          :data="form.idPhoneLogList"
          @on-selection-change="onSelectionChange"
          no-data-text="亲，没有找到相关记录哦！~"></Table>
      </FormItem>
    </Form>
    <!-- <FooterBtns /> -->
  </div>
</template>
<script>
  import FooterBtns from './FooterBtns';
  import PictureEditItem from '@/components/PictureEditItem'
  import imgLink from "./imgLink";
  import { preFixPath, formatDate } from '@/util'

  export default {
    props: {
      form: {
        type: Object
      },
      isEdit: {
        type: Boolean,
        default: false
      },
      id: {
        type: String,
        default: ''
      },
      isExit: {
        type: Boolean,
        default: false
      },
      isFromPublic: {
        type: Boolean,
        default: false
      }
    },
    components: {
      FooterBtns,
      PictureEditItem,
      imgLink
    },
    computed: {
      imgs() {
        return this.form.storeContractDTO.storeContractExtDTO || {}
      },
      idp() {
        let url = this.imgs.ownerIdcardPositiveImageUrl
        return url ? [{ status: 'finished', imgUrl: url }] : []
      },
      idn() {
        let url = this.imgs.ownerIdcardNegativeImageUrl
        return url ? [{ status: 'finished', imgUrl: url }] : []
      },
      bsl() {
        let url = this.imgs.businessLicenseImageUrl
        return url ? [{ status: 'finished', imgUrl: url }] : []
      },
      timeRange: {
        get() {
          return [this.form.storeContractDTO.ownerIdcardBeginDate, this.form.storeContractDTO.ownerIdcardEndDate]
        },
        set(val) {
          const [s, e] = val
          this.form.storeContractDTO.ownerIdcardBeginDate = s ? formatDate(s) : s
          this.form.storeContractDTO.ownerIdcardEndDate = e ? formatDate(e) : e
        }
      }
    },
    mounted () {
    },
    data() {
      return {
        tableHeight: 400,
        list: {
          status: 'pass',
          totalItem: 1,
          pageSize: window.$pageSize,
          currentPage: 1,
          columns: [{
            title: '上传时间',
            key: 'date',
            align: 'left',
          }, {
            title: '身份证正面',
            key: 'ownerIdcardPositiveImageUrl',
            render: (h, params) => {
              let org = params.row.ownerIdcardPositiveImageUrl
              let url = org.indexOf('http') > -1 ? org : preFixPath + org
              return (
                org ? 
                <a style='display:inline-block;width:100px;'>
                  <img
                    onClick={()=> {
                      this.$vueImgPreview(url)
                    }}
                    src={ url + '?x-oss-process=image/resize,w_100' }></img>
                </a> :
                <span>暂无图片</span>
              )
            }
          }, {
            title: '身份证反面',
            key: 'ownerIdcardNegativeImageUrl',
            render: (h, params) => {
              let org = params.row.ownerIdcardNegativeImageUrl
              let url = org.indexOf('http') > -1 ? org : preFixPath + org
              return (
                org ?
                <a style='display:inline-block;width:100px;'>
                  <img
                    onClick={()=> {
                      this.$vueImgPreview(url)
                    }}
                    src={ url + '?x-oss-process=image/resize,w_100'}></img>
                </a> :
                <span>暂无图片</span>
              )
            }
          }],
        },
        isBlurExit: false,
        rule: {
          ownerName: { required: true, type: 'string', message: '请输入名称', trigger: 'blur' },
          // ownerIdcardNo: { required: true, type: 'string', message: '请输入身份证号', trigger: 'blur' },
          // businessLicenseNo: { required: true, type: 'string', message: '请输入营业执照注册号', trigger: 'blur' },
          // ownerIdcardBeginDate: { required: true, type: 'string', message: '请选择', trigger: 'blur' }
        }
      }
    },
    methods: {
      uploadPic(v, type) {
        this.form.storeContractDTO.storeContractExtDTO[type] = v[0] ? v[0].imgUrl : ''
      },
      onCheckNo () {
        let param = {
          businessLicenseNo: this.form.storeContractDTO.businessLicenseNo,
          storeId: this.id
        }
        this.$ajaxPost('/store_contract_audit/audit/check_businessno', param).then(res => {
          this.isBlurExit = res
          this.$emit('checkNo', res)
        })
      },
      valideForm() {
        return new Promise((resolve) => {
          this.$refs.form.validate(v => {
            resolve(v)
          })
        })
      }
    },
  }
</script>
